<template>
  <div class="content">
    <div class="content_head">
      <el-button type="primary" size="mini" @click="visiable=true">添加</el-button>
    </div>
    <el-table :data="tableData" border style="width:100%;margin-top:20px">
      <el-table-column label="id">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ getDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="index"
        :page-size="pageSize"
        :page-sizes="[10,20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="添加管理" center :visible.sync="visiable" width="800px">
      <el-form :model="userForm" :rules="rules" ref="form" label-width="50px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入管理账号"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" placeholder="请输入管理密码"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" placeholder="请输入管理昵称"/>
        </el-form-item>
        <el-form-item label="角色" prop="roleIndex">
          <el-select v-model="userForm.roleIndex" placeholder="请选择角色" @change="changeRole">
            <el-option
              v-for="(item,index) in roleData"
              :key="index"
              :label="item.name"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm('form')">添加</el-button>
          <el-button size="small" @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改管理" center :visible.sync="visiable1" width="800px">
      <el-form :model="user" :rules="rules" ref="form1" label-width="50px">
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" placeholder="请输入新的管理密码"/>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="user.nickname" placeholder="请输入新的管理昵称"/>
        </el-form-item>
        <el-form-item label="角色" prop="roleIndex">
          <el-select v-model="user.roleIndex" placeholder="请选择角色" @change="changeRole1">
            <el-option
              v-for="(item,index) in roleData"
              :key="index"
              :label="item.name"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm1('form1')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { add, del, list, update } from "@/api/management.js";
import { roleList } from "@/api/role.js";
import { getDate } from "@/utils/dateUtil.js";
import { validateUsername, validatePassword } from "@/utils/validate.js";
export default {
  data() {
    return {
      user: {
        id: "",
        roleIndex: "",
        username: "",
        nickname: "",
        roleId: "",
        roleName: "",
        password: ""
      },
      visiable1: false,
      roleData: [],
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        nickname: [
          { required: true, message: "请输入管理昵称", trigger: "blur" }
        ],
        roleIndex: [
          { required: true, message: "请选择角色", trigger: "change" }
        ]
      },
      userForm: {
        roleIndex: "",
        username: "",
        nickname: "",
        roleId: "",
        roleName: "",
        password: ""
      },
      visiable: false,
      total: 0,
      pageSize: 10,
      index: 1,
      tableData: []
    };
  },
  mounted() {
    this.getTableData();
    this.getRole();
  },
  methods: {
    changeRole1(index) {
      this.user.roleId = this.roleData[index].id;
      this.user.roleName = this.roleData[index].name;
    },
    edit(data) {
      this.visiable1 = true;
      this.user.id = data.id;
      this.user.username = data.username;
      this.user.nickname = data.nickname;
      for (var i = 0; i < this.roleData.length; i++) {
        if (this.roleData[i].id == data.roleId) {
          this.user.roleIndex = i;
          break;
        }
      }
    },
    submitForm1(name, id) {
      var that = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          update(
            that.user.id,
            that.user.nickname,
            that.user.roleId,
            that.user.roleName,
            that.user.username,
            that.user.password
          ).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.visiable1 = false;
            this.$refs[name].resetFields();
            this.getTableData();
          });
        }
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    submitForm(name) {
      var that = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          add(
            that.userForm.nickname,
            that.userForm.roleId,
            that.userForm.roleName,
            that.userForm.username,
            that.userForm.password
          ).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.visiable = false;
            this.$refs[name].resetFields();
            this.getTableData();
          });
        } else {
          return false;
        }
      });
    },
    changeRole(index) {
      this.userForm.roleId = this.roleData[index].id;
      this.userForm.roleName = this.roleData[index].name;
    },
    getRole() {
      roleList().then(res => {
        this.roleData = res.data;
      });
    },
    del(id) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getDate(time) {
      return getDate(time);
    },
    getTableData() {
      list(this.index, this.pageSize).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getTableData();
    }
  }
};
</script>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
}
.content_head {
  display: flex;
  justify-content: flex-end;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>


